<template>
  <div class="common-layout">
    <el-container class="main">
      <MyMenu></MyMenu>
      <!-- 侧边导航 -->
      <el-container class="main-content">
        <MyHead :userInfo="userInfo"></MyHead>
        <!-- 头部 -->
        <el-main>
          <router-view></router-view>
          <!-- 内容展示区，默认是home -->
        </el-main>
        <MyFoot></MyFoot>
        <!-- 底部 -->
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { Ajax } from "@/api";
import { useStore } from "@/store";
import MyFoot from "./MyFoot.vue";
import MyHead from "./MyHead.vue";
import MyMenu from "./MyMenu.vue";


const {changeUserInfo,changeRoleList } = useStore()
const userInfo = computed(() => {//userInfo来了
  return useStore().userInfo;
});
const roleList = computed(() => {//userInfo来了
  return useStore().roleList;
});
onMounted(()=>{
   changeRoleList()//携带这个参数请求。一次获取到userinfo和rolelist
})
</script>

<style lang="scss" scoped>
.common-layout{
    width:100%;
    height:100%;
    .main{
        min-height: 100%;
        .main-content{
            display:flex;
            flex-direction: column;
        }
    }
}
</style>